<template>
  <div id="comment">
    <div class="comment-box">
      <div class="title">
        <div>用户评论</div>
        <div class="icon">
          <span>更多</span>
          <i class="iconfont icon-you"></i>
        </div>
      </div>
      <div class="comment-info">
        <div class="user" v-if="comment.user">
          <img :src="comment.user.avatar" alt="" />
          <span>{{ comment.user.uname }}</span>
        </div>
        <p>{{ comment.content }}</p>
        <div class="timer">
          <span>{{ comment.created | showDate }}</span>
          <span>{{ comment.style }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from '../../../network/utils'

export default {
  props: {
    comment: Object
  },
  data() {
    return {}
  },
  filters: {
    showDate(value) {
      const date = new Date(value * 1000)
      return formatDate(date, 'yyyy-MM-dd')
    }
  }
}
</script>

<style lang="less" scoped>
#comment {
  padding: 20px 10px;
  margin-top: 10px;
  border-top: 8px solid #f2f5f8;
  .title {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    .icon {
      display: flex;
      align-items: center;
    }
    .iconfont {
      font-size: 12px;
      margin-left: 3px;
    }
  }
  .comment-info {
    .user {
      display: flex;
      align-items: center;
      margin: 10px 0;
    }
    img {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  p {
    font-size: 14px;
  }
  .timer {
    font-size: 12px;
    margin-top: 10px;
    color: #999;
    span {
      margin-right: 10px;
    }
  }
}
</style>
